Kaffen - Cafe & Restaurant HTML5 Template
by: bslthemes
Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com
File structure
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──assets/
│──│──│──images/
│──│──fonts/
│──│──images/
│──│──js/
│──│──│──bootstrap.js
│──│──│──common.js
│──│──│──imagesloaded.pkgd.js
│──│──│──isotope.pkgd.js
│──│──│──jquery.paroller.min.js
│──│──│──jquery.min.js
│──│──│──jquery.scrolla.js
│──│──│──jquery.validate.min.js
│──│──│──magnific-popup.js
│──│──│──parallax.js
│──│──│──skrollr.js
│──│──│──splitting.js
│──│──│──swiper.js
│──│──mailer/
│──│──│──feedback.php
│──│──│──feedback_r.php
│──│──│──form_setting.php
│──│──scss/
│──│──styles/
│──│──│──animate.css
│──│──│──bootstrap.css
│──│──│──magnific-popup.css
│──│──│──splitting.css
│──│──│──swiper.css
│──│──style.css
│──│──index.html
│──│──index-2.html
│──│──about.html
│──│──menu-coffee.html
│──│──menu-restaurant.html
│──│──reservation.html
│──│──services.html
│──│──faq.html
│──│──team.html
│──│──history.html
│──│──gallery.html
│──│──contacts.html
│──│──blog.html
│──│──blog-grid.html
│──│──blog-single.html
-
styles/ - plugins styles for template
-
scss/ - main .scss styles for template
-
style.css - main CSS styles for template
-
js/ - all JS library for template
- common.js - main JS for template
-
mailer/ - PHP forms and mail settings for template
- form_setting.php - email settings for forms
- feedback.php - contact form settings
- feedback_r.php - reservation form settings
Settings
Include of fonts
To use fonts, you must add one tag 'link' from section below to head section.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto" type="text/css" media="all" />
Next step is to replace "font-family: '...';" to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free, use search and select icons.
Copy icon class (for example "fas fa-code") and add to tag in html file like this:
<i class="fas fa-pencil-ruler"></i>
Contact Form PHP
To modify the form is submitted, you can use the following settings, folders "/mailer/form_setting.php" and "/mailer/feedback.php"
HTML structure
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kaffen - Cafe & Restaurant HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<!-- BEGIN CSS STYLES -->
<link rel="stylesheet" href="styles/bootstrap.css" type="text/css" media="all" />
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.css" type="text/css" media="all" />
<link rel="stylesheet" href="fonts/font-awesome/css/line-awesome.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/animate.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/magnific-popup.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/splitting.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/swiper.css" type="text/css" media="all" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<!-- END CSS STYLES -->
</head>
<body>
<div class="bg">
<!-- Preloader -->
<div class="preloader">
<div class="centrize full-width">
<div class="vertical-center">
<div class="spinner-logo">
<img src="images/logo.png" alt="" />
<div class="spinner-dot">
<div class="spinner-line"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<header class="kf-header">
...
</header>
<!-- Wrapper -->
<div class="wrapper">
...
</div>
<!-- Footer -->
<div class="kf-footer">
...
</div>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/swiper.js"></script>
<script src="js/splitting.js"></script>
<script src="js/jquery.paroller.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
<script src="js/isotope.pkgd.js"></script>
<script src="js/jquery.scrolla.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/common.js"></script>
</body>
</html>
HTML structure of "Home" pages
<!-- Wrapper -->
<div class="wrapper">
<!-- Section Started Slider -->
<section class="section kf-started-slider">
<div class="swiper-container">
...
</div>
</section>
<!-- Section About -->
<section class="section kf-about">
<div class="container">
...
</div>
</section>
<!-- Section Services -->
<section class="section kf-services">
<div class="container">
...
</div>
</section>
<!-- Section Menu -->
<section class="section kf-menu kf-parallax" style="background-image: url(images/menu_bg.jpg);">
<div class="container">
...
</div>
</section>
<!-- Section Choose -->
<section class="section kf-choose">
<div class="container">
...
</div>
</section>
<!-- Section Grid Carousel -->
<section class="section kf-grid-carousel">
<div class="container">
...
</div>
</section>
<!-- Section Testimonials Slider -->
<section class="section kf-testimonials kf-parallax" style="background-image: url(images/testimonials_bg.jpg);">
<div class="container">
...
</div>
</section>
<!-- Section Numbers -->
<section class="section kf-numbers">
<div class="container">
...
</div>
</section>
<!-- Section Latest Blog -->
<section class="section kf-latest-blog">
<div class="container">
...
</div>
</section>
<!-- Section CTA -->
<section class="section kf-cta kf-parallax" style="background-image: url(images/cta_bg.jpg);">
<div class="container">
...
</div>
</section>
</div>
HTML structure of "Inner" pages
<!-- Wrapper -->
<div class="wrapper">
<!-- Section Started Inner -->
<section class="section kf-started-inner">
<div class="kf-parallax-bg js-parallax" style="background-image: url(images/about_inner_bg.jpg);"></div>
<div class="container">
...
</div>
</section>
<!-- Section About-2 -->
<section class="section kf-choose kf-choose-2">
<div class="container">
...
</div>
</section>
<!-- Section Numbers-2 -->
<section class="section kf-numbers-2">
<div class="container">
...
</div>
</section>
<!-- Section Video -->
<section class="section kf-video">
<div class="container">
...
</div>
</section>
<!-- Section Services-2 -->
<section class="section kf-services">
<div class="container">
...
</div>
</section>
<!-- Section Team -->
<section class="section kf-team">
<div class="container">
...
</div>
</section>
<!-- Section Brands -->
<section class="section kf-brands">
<div class="container">
...
</div>
</section>
<!-- Section Testimonials Slider -->
<section class="section kf-testimonials kf-parallax" style="background-image: url(images/testimonials_bg2.jpg);">
<div class="container">
...
</div>
</section>
</div>
Icons
In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free
Sourse & Credits
Scripts
Fonts
Images
Any Images or logos used in previews are not included in this item or final purchase.